<template>
  <div class="ship-management pd-20">
    <el-form :inline=true>
      <el-form-item label="客户名称">
        <el-input v-model="organizationName"
                  placeholder="请输入客户名称"
                  class="w-200"
                  clearable
                  @clear="handleQuery"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="handleQuery">查 询</el-button>
        <el-button type="warning"
                   @click="handleRowClick(null, 'detail')">发 货</el-button>
      </el-form-item>

    </el-form>

    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:option="{row}">
        <el-button type="success"
                   @click="handleRowClick(row, 'detail')">详 情</el-button>
        <el-button type="primary"
                   @click="handleRowClick(row, 'edit')">编 辑</el-button>
        <el-button type="danger"
                   @click="handleRowClick(row, 'del')">删 除</el-button>
      </template>
    </element-table>
    <ship-dialog :shipObj="shipObj"
                 :isDetail="isDetail"
                 :visible.sync="isShowShip"
                 v-if="isShowShip"></ship-dialog>
  </div>
</template>
<script>
  import elementTable from '@/base/ElementTable'
  import shipDialog from './shipDialog'
  export default {
    name: 'shipManamement', // 发货管理
    data () {
      return {
        loading: false,
        pageTotal: 0,
        pageIndex: 1,
        pageSize: 20,
        organizationName: '',
        columns: [
          {
            label: '客户名称',
            prop: 'organizationName'
          },
          {
            label: '试纸种类（种）数量',
            prop: 'testStripKind'
          },
          {
            label: '数量（盒）',
            prop: 'num',
            align: 'center',

          },
          {
            label: '总条数（条）',
            prop: 'totalNum',
            align: 'center',

          },
          {
            label: '发货日期',
            prop: 'createTime',
            align: 'center',
            width: 150,
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
            },
          },
          {
            width: 240,
            label: '操作',
            align: 'center',
            prop: 'option',
            isSlot: true
          }
        ],
        tableData: [],
        isDetail: false,
        shipObj: {},
        isShowShip: false,
      }
    },
    methods: {
      handleQuery() {
        this.pageIndex = 1
        this.getList()
      },
      // 查询列表
      async getList () {
        this.loading = true
        const { data: res } = await this.post(this.api.testStrip.getTestStripDeliverPage, {
          organizationName: this.organizationName,
          pageIndex: this.pageIndex - 1,
          pageSize: this.pageSize,
        })
        if (res.code === '200') {
          this.loading = false
          this.tableData = res.object
          this.pageTotal = res.totalNum
        } else {
          this.$message.error(res.message)
        }
      },
      // 分页
      handleChangePage (page) {
        this.pageIndex = page
        this.getList()
      },
      // 操作
      async handleRowClick (row, op) {
        this.isDetail = false;
        switch (op) {
          case 'add':
            this.shipObj = null
            this.isShowShip = true;
            break;
          case 'detail':
            this.shipObj = row
            this.isDetail = true;
            this.isShowShip = true;
            break;
          case 'edit':
            this.shipObj = row
            this.isShowShip = true;
            break
          case 'del':
            this.$confirm('确认删除？')
              .then(async _ => {
                const { data: res } = await this.post(this.api.testStrip.delShipRecord, {
                  id: row.id
                })
                if (res.code === '200') {
                  this.$message.success('删除成功!')
                  this.getList()
                } else {
                  this.$message.error(res.message)
                }
              })
              .catch(_ => { });
            break
        }
      },

    },
    created () {
      this.getList()

    },
    components: {
      'element-table': elementTable,
      'ship-dialog': shipDialog
    }
  }
</script>
<style lang="sass" scoped>
</style>
